<template>
  <el-dialog
    center
    v-loading="loading"
    append-to-body
    title="日程信息"
    width="70%"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="calenderBox">
      <div class="title">
        <span>{{taskInfo.projectName}}：</span><span style="color:#409eff">{{taskInfo.projectDate}}</span>
      </div>
      <Calendar
        @choseDay="clickDay"
        @changeMonth="changeDate"
        :agoDayHide="agoDay"
        :markDateMore="arr"
      >
      </Calendar>
      <el-select class="selectTeams" @change="selectClick" v-model="taskValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <div class="listBut">
        <el-button type="primary" @click="projectTeams">调整给其他小组</el-button>
        <el-button type="primary" @click="adjustmentDate1" v-if="adjustShow">调整项目日期</el-button>
        <el-button type="primary" @click="adjustmentDate2" v-else>确定</el-button>
        <el-button @click="handleClose">返回</el-button>
      </div>
    </div>
    <el-dialog
      center
      title="提示"
      append-to-body
      :visible.sync="projectShow"
      width="30%"
      style="margin-top: 20vh"
      :close-on-click-modal="false"
      :before-close="projectClose">
      <span class="dialog-title">您确定要把<span>{{taskInfo.projectName}}</span>分配给<span>{{this.taskValue}}</span>吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="projectShow = false">取 消</el-button>
        <el-button type="primary" @click="projectClcik">确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import Calendar from "../../components/vueCalender";
export default {
  name: 'vCalender',
  components: {
    Calendar
  },
  props: ['taskInfo', 'teamsId', 'taskId'],
  data() {
    return {
      dialogVisible: true, // 日历弹出框状态
      projectShow: false, // 调整到小组弹框状态
      agoDay: '', // 之前的数据不可点击
      loading: false,
      calendarShow: false, // 日历显示
      yearMonth: '', // 切换的月份
      arr: [], // 渲染日期
      options: [], // 任务列表
      taskValue: '', // 任务下拉列表内容
      taskValId: '', // 任务下拉列表id
      adjustShow: true, // 调整按钮显隐
    };
  },
  created() {
    this.taskValue = this.taskInfo.group.name
    this.taskValId = this.taskInfo.group.id
  },
  mounted() {
    this.getDate() // 请求日历数据
    this.selectData() // 查出任务组列表
  },
  methods: {
    // 查出任务组下拉列表
    async selectData() {
      const data = await this.axios.get('/api/blade-business/dept-group/list')
      this.options = data.data.data
      console.log(this.options)
    },
    // 点击任务组下拉框
    selectClick(e) {
      console.log(e)
      this.taskValId = e
      let obj = this.options.find(item => {
          return item.id == e;
      });
      this.taskValue = obj.name
      this.teamsId = e
      this.adjustShow = true // 调整日期按钮复原
      this.getDate()
    },
    // 获取日历数据
    getDate(yearMonth = '') {
      this.loading = true
      this.axios.get('/api/blade-business/dept-group-sche/list', {
        params: {
          groupid: this.teamsId,
          orderid: this.taskId,
          yearMonth: yearMonth
        }
      }).then(res => {
        this.loading = false
        if(res.data.code == '200') {  
          console.log(res.data.data)
          const dateList = res.data.data
          // 日历展示列表
          let result = []
          for(let i in dateList) {
            if(dateList[i].flag == 0) {
              result[i] = dateList[i]
              result[i]['className'] = "mark1"
            } else if(dateList[i].flag == 1) {
              result[i] = dateList[i]
              result[i]['className'] = "mark2"
            }
          }
          // 日期转换为时间戳10位
          let result2 = '2030/7/28'
          const date = new Date(result2);
          const resDate = date.getFullYear() + "/" + (date.getMonth() + 1)+  "/" + (date.getDate());
          console.log(resDate)
          let tmp = Date.parse(resDate).toString();
          tmp = tmp.substr(0,10);
          this.agoDay = tmp;
          this.arr = result
        }
      })
    },
    // 点击调整日期按钮并可调整日期
    adjustmentDate1() {
      console.log(111)
      // 日期转换为时间戳10位
      const date = new Date();
      const resDate = date.getFullYear() + "/" + (date.getMonth() + 1)+  "/" + (date.getDate()+1);
      console.log(resDate)
      let tmp = Date.parse(resDate).toString();
      tmp = tmp.substr(0,10);
      console.log(tmp)
      this.agoDay = tmp;
      this.adjustShow = false
    },
    // 点击完成按钮修改任务时间
    adjustmentDate2() {
      console.log(this.arr)
      let successDate = []
      for(let i in this.arr) {
        if(this.arr[i].className == 'mark2') {
          successDate.push(new Date(this.arr[i].date)) // 把选中的日期填充到数组中
        }
      }
      console.log(successDate);
      if(successDate.length < 1) {
        this.$message.error('请选择项目日期！')
      } else {
        let maxDate = new Date(Math.max.apply(null, successDate)); // 获取数组最大的日期
        let maxD = maxDate.getFullYear() + "/" + (maxDate.getMonth() + 1)+  "/" + (maxDate.getDate()); // 转化为年月日
        let minDate = new Date(Math.min.apply(null, successDate)); // 获取数组最大的日期
        let minD = minDate.getFullYear() + "/" + (minDate.getMonth() + 1)+  "/" + (minDate.getDate());
        const dateList =  {
          startdate: minD,
          orderid: this.taskId,
          enddate: maxD
        }
        this.axios.post('/api/blade-business/order/updateOrderDate', dateList).then(res => {
          console.log(res)
          if(res.data.code == '200'){
            this.$message.success('项目日期调整成功！')
            this.adjustShow = true
            // 日期转换为时间戳10位
            let result2 = '2030/7/28'
            const date = new Date(result2);
            const resDate = date.getFullYear() + "/" + (date.getMonth() + 1)+  "/" + (date.getDate());
            console.log(resDate)
            let tmp = Date.parse(resDate).toString();
            tmp = tmp.substr(0,10);
            this.agoDay = tmp;
            this.$emit('closeCalender')
          }
        }).catch(err => {
          console.log(err)
        })
      }

      successDate = []
    },
    // 点击选择日期
    clickDay(data) {
      console.log(data); //选中某天
      const date = data;
      const dateList = []
      for(let i in this.arr) {
        dateList[i] = this.arr[i].date
      }
      const ind = dateList.indexOf(date); // 找到当前值在数组里的下标
      if (ind == "-1") {
        this.arr.push({
          date: date,
          className: 'mark2'
        });
      } else {
        this.arr.splice(ind, 1); // 通过下标删除当前值
      }
      console.log(this.arr)
      this.$forceUpdate();
    },
    // 调整给其他小组
    projectTeams() {
      this.projectShow = true
    },
    // 调整确定
    projectClcik() {
      const OrderList = {
        groupid: this.taskValId,
        orderid: this.taskId
      }
      this.axios.post('/api/blade-business/order/updateOrderGroup', OrderList).then(res => {
        console.log(res)
        if(res.data.code == 200){
          this.$message.success('项目日期调整给小组操作成功！')
          this.projectShow = false
          this.$emit('closeCalender')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 调整取消i
    projectClose() {
      this.projectShow = false
    },
    //左右点击切换月份
    changeDate(e) {
       this.adjustShow = true // 调整日期按钮复原
      const date = new Date(e);
      const resDate = date.getFullYear() + "-" + (date.getMonth() + 1);
      console.log(resDate);
      this.getDate(resDate)
    },
    handleClose() { // 关闭日历弹框
      this.$emit('closeCalender')
    }
  }
}
</script>
<style lang='scss' scoped>
// 日历
.calenderBox{
  margin: 0 auto;
  position: relative;
  text-align: center;
  h3 {
    font-size: 20px!important;
    font-weight: 500!important;
  }
  .title {
    color: #333;
    font-size: 15px;
    margin-bottom: 20px;
  }
}
.selectTeams{
  position: absolute;
  left: 5.9%;
  top: -2%;
}

.listBut{
  margin-top: 30px;
}
/deep/.el-dialog--center .el-dialog__body {
  text-align: center;
}
.dialog-title {
  letter-spacing: 2px;
  &>span {
    color: #ff8498;
  }
  &>span+span {
    color: #409eff;
  }
}
/deep/.listBut .el-button {
  margin-right: 40px;
}
/deep/.dialog-footer .el-button {
  margin-right: 40px;
}
</style>